<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        元素节点：  <div></div>   仅仅是标签名  
        属性节点:   class="box"
        文本节点:   hello  空格 换行
        注释节点:   我是注释节点 

      --> 
    <div class="box">
        hello
        <!-- 我是注释节点 -->
        asdf 
    </div>
    <script>
        // 节点的属性 

        // 每个节点都有的


        // 1 nodeType
        //  元素节点  1
        //  属性节点  2
        //  文本节点  3 
        //  注释节点  8

        // 2 nodeName  节点名称 

        // 元素节点:  大写的标签名   
        // 属性节点:  属性的名字
        // 文本节点:  #text
        // 注释节点:  #comment

        // 3 nodeValue   节点内容
        // 元素节点:  null   
        // 属性节点:  属性的值
        // 文本节点:  文本内容    包含空格和换行
        // 注释节点:  注释内容     包含空格和换行


        // ---------------------------------

        // 获取节点
        // 元素节点  
        var ele = document.querySelector('div');

        // 属性节点 
        var attr  = ele.attributes;
        var res = attr[0];

        // 文本节点 
        var textNode = ele.childNodes[0]
        // console.log(textNode);

        //注释节点 
        var ex = ele.childNodes[1];
        // console.log(ex);



        // nodetype

        console.log('元素节点的nodetype',ele.nodeType);
        console.log('属性节点的nodetype',res.nodeType);
        console.log('文本节点的nodetype',textNode.nodeType);
        console.log('注释节点的nodetype',ex.nodeType);


       // nodeName

       console.log('元素节点的nodeName',ele.nodeName);
        console.log('属性节点的nodeName',res.nodeName);
        console.log('文本节点的nodeName',textNode.nodeName);
        console.log('注释节点的nodeName',ex.nodeName);

        // nodeValue

        console.log('元素节点的nodeValue',ele.nodeValue);
        console.log('属性节点的nodeValue',res.nodeValue);
        console.log('文本节点的nodeValue',textNode.nodeValue);
        console.log('注释节点的nodeValue',ex.nodeValue);





        // 应用场景  


        // 获取 属性的值    获取标签中间的文本  
        // 用来判断节点到底是什么类型
    </script>
</body>
</html>